<template>
  <div>
      <transition-group tag="ul" name="list">
        <li v-for="(todo, index) in todos" :key="index"  class="list-item">
          {{ todo.title }}--{{todo.id}}
          <button @click="removeFatherTodo(index)">Remove</button>
        </li>
      </transition-group>
  </div>
</template>

<script>
  export default {
    props: [
      'todos'
    ],
    data() {
      return {
        //removeIndex:''
      }
    },
    methods: {
      removeFatherTodo: function (index) {
        this.$emit('removeToDo', index)
      }
    }
  }
</script>

<style scoped>
  .list {
    display: inline-block;
    margin-right: 10px;
  }
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to
    /* .list-leave-active for below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
  }
</style>
